<template>
    <div class="report-record">
        <el-row :gutter="40" style="margin-bottom: 20px;">
            <el-col :span="6">
                <el-button size="small" type="primary" @click="editHandle()">新增</el-button>
                <el-button size="small" type="danger" @click="deleHandle()">删除</el-button>
				<span style="display: inline-block;margin-left: 20px;">总数：{{total}}</span>
            </el-col>
            <el-col :span="18" class="text-right">
                <el-input v-model="user_name" placeholder="请输入用户名" style="width: 200px; margin-right: 10px;"
                          size="mini"></el-input>
						  
				<el-input v-model="use_name" placeholder="请输入公司名称" style="width: 200px; margin-right: 10px;"
				          size="mini"></el-input>		  
                <el-date-picker
                        v-model="production_time"
                        type="month"
                        size="mini"
                        style="margin-right: 10px;"
                        placeholder="选择日期">
                </el-date-picker>
				
			
				<el-select class="topselect" size="mini" v-model="scheme_type" placeholder="请选择">
					<el-option   v-for="item in Scheme_type" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				
				
                <el-button size="mini" type="primary" @click="search()">搜索</el-button>
            </el-col>
        </el-row>

        <el-tabs type="border-card" @tab-click="handleClick">
            <el-tab-pane label="个人记录">
                <el-table ref="multipleTable" :data="tableData" style="width: 100%"
                          @selection-change="handleSelectionChange"
                          border :header-cell-class-name="headerCellClass" :cell-class-name="cellStyle">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                   <el-table-column label="用户名" width="120">
                       <template slot-scope="scope">
                           <span class="red">{{ scope.row.user_name }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="公司名称" width="320">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.use_name }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="标题" width="320">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.title }}</span>
                       </template>
                   </el-table-column> 
				   <el-table-column label="文案" width="320">
				       <template slot-scope="scope">
				           <span class="blue" v-if="scope.row.copywriting">{{ scope.row.copywriting }}</span>
				           <span v-else>无</span>
				       </template>
				   </el-table-column>
				   <el-table-column label="关键字">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.keywords }}</span>
                       </template>
                   </el-table-column> 
				   <el-table-column label="主题切入点">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.theme }}</span>
                       </template>
                   </el-table-column>
					<el-table-column label="文案类型">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.scheme_type }}</span>
                       </template>
                   </el-table-column>
					<el-table-column label="备注">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.remarks }}</span>
                       </template>
                   </el-table-column>
                   
                   <el-table-column label="视频" width="120">
                       <template slot-scope="scope"><!-- {{scope.row.video}} -->
					   <el-image v-if="is_vido(scope.row.video)=='img'" style="width: 60px;height: 50px;" :src="get_url(scope.row.video)"></el-image>
					   <video v-if="is_vido(scope.row.video)=='viod'" :src="get_url(scope.row.video)" controls="controls" width="50" height="50" :data-node="get_url(scope.row.video)"></video>
					   
					   </template>
                   </el-table-column>
                   <el-table-column label="播放量" width="120">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.playback_volume }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="点赞量" width="120">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.praise_quantity }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="评论/及回复" width="120">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.comment }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="制作时间" width="160">
                       <template slot-scope="scope">{{scope.row.production_time}}</template>
                   </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="editHandle(scope.row.id)" size="mini">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-tab-pane>
            <el-tab-pane label="部门所有记录">
                <el-table ref="multipleTable" :data="tableData" style="width: 100%"
                          @selection-change="handleSelectionChange"
                          border :header-cell-class-name="headerCellClass" :cell-class-name="cellStyle">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                   <el-table-column label="用户名" width="120">
                       <template slot-scope="scope">
                           <span class="red">{{ scope.row.user_name }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="公司名称" width="320">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.use_name }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="标题" width="320">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.title }}</span>
                       </template>
                   </el-table-column> 
                   <el-table-column label="文案" width="320">
                       <template slot-scope="scope">
                           <span class="blue" v-if="scope.row.copywriting">{{ scope.row.copywriting }}</span>
                           <span v-else>无</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="关键字">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.keywords }}</span>
                       </template>
                   </el-table-column> 
                   <el-table-column label="主题切入点">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.theme }}</span>
                       </template>
                   </el-table-column>
                	<el-table-column label="文案类型">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.scheme_type }}</span>
                       </template>
                   </el-table-column>
                	<el-table-column label="备注">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.remarks }}</span>
                       </template>
                   </el-table-column>
                   
                   <el-table-column label="视频" width="120">
                       <template slot-scope="scope"><!-- {{scope.row.video}} -->
                	   <el-image v-if="is_vido(scope.row.video)=='img'" style="width: 60px;height: 50px;" :src="get_url(scope.row.video)"></el-image>
                	   <video v-if="is_vido(scope.row.video)=='viod'" :src="get_url(scope.row.video)" controls="controls" width="50" height="50" :data-node="get_url(scope.row.video)"></video>
                	   
                	   </template>
                   </el-table-column>
                   <el-table-column label="播放量" width="120">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.playback_volume }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="点赞量" width="120">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.praise_quantity }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="评论/及回复" width="120">
                       <template slot-scope="scope">
                           <span class="blue">{{ scope.row.comment }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="制作时间" width="160">
                       <template slot-scope="scope">{{scope.row.production_time}}</template>
                   </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="primary"  @click="editHandle(scope.row.id)" size="mini">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

        <!-- <div class="custom-pagination">
            <el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange">
            </el-pagination>
        </div> -->
		
		<div class="custom-pagination">
			<el-pagination background layout="prev, pager, next,sizes" :total="total"
				@current-change="pageChange" @size-change="handleSizeChange" :page-size="pagesize"
				:page-sizes="[10, 20, 50, 100]">
				
			</el-pagination>
			
		</div>

        <!--  弹窗 -->
        <edit-video-make v-if="showModal" ref="myModal" @refreshDataList="refreshDataList"></edit-video-make>
    </div>
</template>

<script>
    // EditWeChat
    import EditVideoMake from "./components/EditVideoMake";
import {unixTimeToDateTime} from "@/util/index.js";
    export default {
        components: {
            EditVideoMake
        },
        data() {
            return {
                showModal: false,
                input: '',
                value2: '',
				user_name:'',
				use_name:'',
				scheme_type:'',
				production_time:'',
                tableData: [],
                multipleSelection: [],
                page: 1,
                total: 0,
				pagesize:10,
				tab:0,Scheme_type: [
					{
					    id: '',
					    name: '全部'
					},
				    {
				        id: '农、林、牧、渔业',
				        name: '农、林、牧、渔业'
				    },{
				        id: '采矿业',
				        name: '采矿业'
				    },{
				        id: '制造业',
				        name: '制造业'
				    },{
				        id: '电力、热力、燃气及水生产和供应业',
				        name: '电力、热力、燃气及水生产和供应业'
				    },{
				        id: '建筑业',
				        name: '建筑业'
				    },{
				        id: '批发和零售业',
				        name: '批发和零售业'
				    },{
				        id: '交通运输、仓储和邮政业',
				        name: '交通运输、仓储和邮政业'
				    },{
				        id: '住宿和餐饮业',
				        name: '住宿和餐饮业'
				    },{
				        id: '信息传输、软件和信息技术服务业',
				        name: '信息传输、软件和信息技术服务业'
				    },{
				        id: '金融业',
				        name: '金融业'
				    },{
				        id: '房地产业',
				        name: '房地产业'
				    },{
				        id: '租赁和商务服务业',
				        name: '租赁和商务服务业'
				    },{
				        id: '科学研究和技术服务业',
				        name: '科学研究和技术服务业'
				    },{
				        id: '水利、环境和公共设施管理业',
				        name: '水利、环境和公共设施管理业'
				    },{
				        id: '居民服务、修理和其他服务业',
				        name: '居民服务、修理和其他服务业'
				    },{
				        id: '教育',
				        name: '教育'
				    },{
				        id: '卫生和社会工作',
				        name: '卫生和社会工作'
				    },{
				        id: '文化、体育和娱乐业',
				        name: '文化、体育和娱乐业'
				    },{
				        id: '公共管理、社会保障和社会组织',
				        name: '公共管理、社会保障和社会组织'
				    },{
				        id: '国际组织',
				        name: '国际组织'
				    },{
				        id: '天网短视频获客系统',
				        name: '天网短视频获客系统'
				    }
				],
            }
        },
        mounted() {
            this.loadData();
			this.get_list();
        },
        methods: {
			get_url(fileUrl){
				var f=fileUrl
				//console.log(f)
				return f;
			},
			is_vido(fileUrl){
				/* let fileUrl = 'https://www.df81.com/abc.jpg'; */
				
				// 取出文件后缀名
				let suffixArr = fileUrl.split('.');
				let fileSuffix = suffixArr[suffixArr.length - 1];
				
				const imgList = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
				if(imgList.indexOf(fileSuffix) > -1){
				    return 'img';	
				}else{
				   const videoList = ['mp4', 'rmvb', 'avi', 'flv', 'm2v', 'mkv', 'wmv', 'mp3', 'wav'];
				   if(videoList.indexOf(fileSuffix) > -1){
					   
				      return 'viod';
				   }else{
					   return 'no'
				   }
				}
				
				
			},
			refreshDataList(){
				 this.showModal = false;
				 this.get_list();
			},
			get_list(){
				this.$http.post("Videocreativity/lists",{page:this.page,limit:this.pagesize,type:this.tab,user_name:this.user_name,production_time:this.production_time,use_name:this.use_name,scheme_type:this.scheme_type}).then((response) => {
					this.total=response.data.total;
					this.tableData=response.data.records; 
					
				})
			},
            loadData() {

            },
            search() {
				this.tableData=[];
				this.total=0;
				this.page=1;
				this.get_list();
            },
			handleClick(tab, event){
				this.tab=tab.index;
				this.page=1;
				this.get_list();
			},
			handleSizeChange(size) {
				this.page=1;
				this.get_list();
				this.pagesize = size;
			},
            editHandle(item) {
                this.showModal = true;
                this.$nextTick(() => {
                    this.$refs.myModal.init(item);
                })
            },
            deleHandle(id) {
                if (this.multipleSelection.length > 0) {
                    this.$confirm('确认删除已选记录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
						var ids=[];
						this.multipleSelection.map(res=>{
							ids.push(res.id)
						})
                        this.axios.post('Videocreativity/del', {id:ids}).then(response => {
                            if (response.code === 1) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功'
                                })
                                this.page = 1;
                               this.get_list();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: response.msg
                                })
                            }
                        })
                    }).catch(() => {
                        console.log('取消退出');
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '请选择要删除的记录'
                    })
                }
            },
            handleSelectionChange(val) {
				console.log(val)
                this.multipleSelection = val;
            },
            pageChange(page) {
                console.log(page)
                this.page = page;
               this.get_list();
            },
            headerCellClass() { // 设置表头样式
                return 'leo text-center'
            },
            cellStyle() { // 设置表格样式
                return 'text-center'
            }
        }
    }
</script>

<style lang="scss">
    .report-record {
        background-color: #ffffff;
		overflow-x: hidden;

        .leo {
            color: #333333;
        }

        .goal {
            line-height: 64px;
            font-size: 18px;
            font-weight: bold;
        }
    }

.topselect{
	margin-right: 10px;
	height: 28px;
	line-height: 28px;
	
	/deep/ .el-input--suffix .el-input__inner {
	   padding-right: 30px;
	   height: 28px;
	   line-height: 28px;
	   margin-top: -5px;
	 }
}
	  
	
</style>
